Questo sito utilizza cookies solo per scopi di autenticazione sul sito e nient'altro. Nessuna informazione personale viene tracciata. Leggi l'informativa sui cookies.
Username: Password: oppure
Javascript - [Canvas] Cambiare continuamente colore a un'immagine sfumando. Cosa sbaglio?
Forum - Javascript - [Canvas] Cambiare continuamente colore a un'immagine sfumando. Cosa sbaglio?

Avatar
a_butta (Member)
Expert


Messaggi: 578
Iscritto: 16/03/2010

Segnala al moderatore
Postato alle 17:38
Lunedì, 08/11/2010
Ciao a tutti.
Con il canvas introdotto dall' HTML5 sto cercando di fare questo: ho u'immagine che ha una scritta di un colore su sfondo nero. Lo sfondo deve rimanere nero, mentre voglio che col tempo il colore della scritta vari (ad esempio passi dal rosso al verde poi al blu e così via, il tutto sfumando da un colore all'altro).
Ho partorito questo codice:
Codice sorgente - presumibilmente Php
  1. var imgS = new Image();
  2. imgS.src = 'scritta.png';
  3. var data;
  4. var pix;
  5. var scritta;
  6. var Color = new Array();
  7. var Bool1 = 0;
  8. var Bool2 = 0;
  9. var Bool3 = 0;
  10. function generateRandomColor () {
  11.   Color[0] = Math.floor(Math.random()*255)+1;
  12.   Color[1] = Math.floor(Math.random()*255)+1;
  13.   Color[2] = Math.floor(Math.random()*255)+1;
  14.   Bool1 = 0;
  15.   Bool2 = 0;
  16.   Bool3 = 0;
  17.   alert('cambio');
  18. }
  19.  
  20. function changeColor() {
  21.   for (var i = 0; i < pix.length; i += 4) {
  22.     if (pix[i] != 0) {
  23.       if (pix[i] < Color[0])
  24.         pix[i] += 1;
  25.       else if (pix[i] > Color[0])
  26.         pix[i] -= 1;
  27.     if (pix[i] == Color[0])
  28.       Bool1 = 1;
  29.     }
  30.    
  31.     if (pix[i+1] != 0) {
  32.       if (pix[i+1] < Color[1])
  33.         pix[i+1] += 1;
  34.       else if (pix[i+1] > Color[1])
  35.         pix[i+1] -= 1;
  36.     if (pix[i+1] == Color[1])
  37.       Bool2 = 1;
  38.     }
  39.    
  40.    
  41.     if (pix[i+2] != 0) {
  42.       if (pix[i+2] < Color[2])
  43.         pix[i+2] += 1;
  44.       else if (pix[i+2] > Color[2])
  45.         pix[i+2] -= 1;
  46.     if (pix[i+2] == Color[2])
  47.       Bool3 = 1;
  48.     }
  49.  
  50.   }
  51.   Scritta.putImageData(data, 0, 0);
  52.   if (Bool1==1 && Bool2==1 && Bool3==1)
  53.     generateRandomColor();  
  54. }
  55.  
  56. function paint() {
  57.     var canvas = document.getElementById('canvas');
  58.     canvas = document.getElementById('canvasS');
  59.     Scritta = canvas.getContext('2d');
  60.     Scritta.fillStyle = 'rgb(255,255,255)';
  61.     Scritta.fillRect(0,0,400,150);
  62.     Scritta.drawImage(imgS,0,0,400,75);
  63.     data = Scritta.getImageData(0,0, 400,75);
  64.     pix = data.data;
  65.     generateRandomColor();
  66. }
  67. var ChangeColorTimer = setInterval("changeColor()",10);


In poche parole l'idea mia è la seguente: genero tre numeri tra 1-255 (lascio lo 0 perchè lo confondo con lo sfondo). Avvio un timer che ogni 10ms prenda ogni pixel della scritta che non sia lo sfondo (quindi che non abbia R G o B nero) e lo diminuisca o lo aumenti di 1 fino a farlo arrivare al valore R G o B stabilito dall'array Color[0] Color[1] e Color[2].
Ogni volta che uno dei tre valori del pixel "arrivi a meta", cioè sia uguale al valore corrispondente R G o B, allora pongo il corrispondente controllo Bool1 Bool2 o Bool3 su 1, cosicchè quando tutti e tre i valori si fissano sul colore generato a caso tutti e tre i Bool risultano 1. In quel caso si si rigenera il colore.
Morale della favola: l'algoritmo non funziona. Inizia a variare colore, ma arrivato a un determinato valore non cambia più. Sembra che non entri mai di nuovo nella funzione generateRandomColor() perchè dopo il primo alert, non ne vedo altri.

Dove sbaglio?:(

Spero di esser stato chiaro, altrimenti chiedo scusa..:(
Grazie anticipatamente

Ultima modifica effettuata da a_butta il 18/11/2010 alle 17:33
PM
Avatar
Oligoatria (Founder Member)
Pro


Messaggi: 79
Iscritto: 20/02/2006

Up
0
Down
V
Segnala al moderatore
Postato alle 10:08
Martedì, 15/02/2011
Ho provato il tuo codice e sembra funzionare, più o meno.
L'ho un po' massaggiato modificando la riga 5 da 'var scritta' in 'var Scritta', dato che in paint() la usi con la S maiuscola: a quanto ricordo Javascript è case-sensitive, o sbaglio?
Ho aggiunto la riga 'paint()' tra la 66 e la 67, ho modificato un po' di dimensioni per adattarle alla mia immagine ed ho buttato tutto nel body di un file html. Ho tolto l'alert.

Risultato: con Opera funziona correttamente.
Firefox restituisce:
Errore: uncaught exception: [Exception... "Security error"  code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)"  location: "[...]/a.html Line: 76"].
Chrome non mi carica l'immagine ma cambia i colori (lento).
lim t->ChrW(8734) (IE) = -ChrW(8734)   con ChrW(8734) == infinito

Spero di esserti stato utile

PM